import React from 'react';
import {Bar} from '@ant-design/plots';
import {Datum} from "@antv/g2plot";

type ModelProps = {
  stepProductDetail: API.StepProductDetailDTO[] | undefined,
  baseStyle: any,
}
const AchievingRate: React.FC<ModelProps> = ({stepProductDetail, baseStyle}) => {
  const data = stepProductDetail?.map(item => {
    return {
      type: item.keyProcessName,
      value: item.planAchievingRate
    }
  })
  const config: any = {
    data,
    xField: 'value',
    yField: 'type',
    xAxis: {
      label: {
        autoHide: false,
        autoRotate: false,
        formatter: (value: number) => value && Number((value * 100).toFixed(2)) + '%'
      },
      max: 1,
    },
    label: {
      style: {
        color: "white",
        opacity: 0.8,
      },
      formatter: (value: any) => value.value && Number((value.value * 100).toFixed(2)) + '%'
    },
    tooltip: {
      showTitle: false,
      formatter: (datum: Datum) => {
        return { name: datum.type, value: Number((datum.value * 100).toFixed(2)) + '%' };      },
    },
    height: 210,
  };
  // return <Column {...config}/>;
  return (
    <div key={1} style={{...baseStyle, width: "50%"}}>
      <div style={{textAlign: "center", color: "green", padding: 5}}>入库达成率</div>
      <Bar {...config}/>
    </div>
  )
};

export default AchievingRate;

